<template>
  <el-dialog v-model="tableShow" width="1200" title="交通事件审核表">
    <el-input
      class="user-search"
      v-model="searchEvent"
      placeholder="请输入用户id进行查询"
      @keyup.enter.native="handleSearch(searchEvent)"
    ></el-input>
    <div class="demo-pagination-block">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="event_driver" label="用户名"></el-table-column>
        <el-table-column prop="road_section_id" label="时间地址"></el-table-column>
        <el-table-column prop="event_date" label="发生时间"></el-table-column>
        <el-table-column prop="event_describe" label="事件描述"></el-table-column>
        <el-table-column prop="event_date" label="发生时间"></el-table-column>
        <el-table-column prop="event_car_number" label="用户车牌号"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <template v-if="row.event_handle_status === 0">
              <el-button type="primary" size="small" @click="handlePass(row)">通过</el-button>
              <el-button type="warning" size="small" @click="handleFail(row)">忽略</el-button>
            </template>
            <template v-else-if="row.event_handle_status === 1"> 已忽略 </template>
            <template v-else-if="row.event_handle_status === 2"> 已审核 </template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :page-count="Math.ceil(total / pageSize)"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script setup>
import { useEventStore } from '../../../../../stores/evenetMange/eventAuditStore'

const {
  tableShow,
  tableData,
  currentPage,
  pageSize,
  total,
  searchEvent,
  handleSizeChange,
  handleCurrentChange,
  handlePass,
  handleFail,
  handleSearch
} = useEventStore()
</script>

<style lang="less" scoped>
.demo-pagination-block {
  margin-top: 20px;
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
  .el-table {
    margin-top: 20px;
    .el-table-column--selection {
      width: 55px;
    }
    .el-table__row {
      &:hover {
        background-color: #f5f7fa;
      }
    }
    .el-table__header {
      background-color: #f5f7fa;
      .cell {
        color: #303133;
        font-weight: 600;
      }
    }
    .el-table__body {
      .cell {
        color: #606266;
      }
    }
  }
}
h2 {
  font-size: 24px;
}
.el-button--small {
  height: var(--el-button-size);
  padding: 14px 7px !important;
  font-size: 12px;
  border-radius: calc(var(--el-border-radius-base) - 1px);
}
</style>
